<!-- 满意度测评 -->
<template>
  <div class="main">
    <div class="pos" style="height: calc(100vh - 180px)">
      <el-tabs v-model="queryParams.params.type" @tab-click="handleClick" style="height: 100%">

        <el-tab-pane label="培训满意度" name="1" style="height: 100%">

          <div class="table" v-if="queryParams.params.type == 1">
            <el-table :data="tableData" height="100%" border :header-cell-style="{
              background: '#f2f3f4',
              color: '#555',
              'font-weight': 'bold',
              'line-height': '32px',
            }" style="width: 100%">
              <el-table-column prop="className" label="培训班名称" width="160">
              </el-table-column>
              <el-table-column prop="organizationName" label="培训单位名称" width="160">
              </el-table-column>
              <el-table-column prop="evaluationScore" label="满意度调查得分" width="140">
              </el-table-column>

              <el-table-column prop="commentsuggest" label="意见和建议" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="overallEvaluation" label="总体评价" show-overflow-tooltip>
              </el-table-column>
              <!-- <el-table-column prop="teacherName" label="培训讲课教师姓名" width="80">
              </el-table-column>
              <el-table-column prop="teacherWorkplace" label="培训讲课教师工作单位" width="110">
              </el-table-column>
              <el-table-column prop="teacherGraduatingSchool" label="培训讲课教师毕业院校" width="110">
              </el-table-column>
              <el-table-column prop="teacherMajor" label="培训讲课教师所学专业" width="110">
              </el-table-column>
              <el-table-column prop="teacherTeachingMajor" label="培训讲课教师所教专业" width="110">
              </el-table-column>
              <el-table-column prop="teacherTitle" label="培训讲课教师职称" width="80">
              </el-table-column>
              <el-table-column prop="teacherSignature" label="培训讲课教师签字">
              </el-table-column> -->
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" icon="el-icon-view" @click="oper('2', scope.row)">查看</el-button>
                  <!-- <el-button type="primary" size="small" icon="el-icon-edit"
                    @click="InformationFilling('update', scope.row)">修改</el-button>
                  <el-button type="danger" size="small" icon="el-icon-delete"
                    @click="InformationDel(scope.row)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </el-tab-pane>
        <el-tab-pane label="培训教师满意度" name="2" style="height: 100%">


          <div class="table" v-if="queryParams.params.type == 2">
            <el-table :data="tableData" border :header-cell-style="{
              background: '#f2f3f4',
              color: '#555',
              'font-weight': 'bold',
              'line-height': '32px',
            }" style="width: 100%">
              <el-table-column prop="className" label="培训班名称" width="160">
              </el-table-column>
              <el-table-column prop="organizationName" label="培训单位名称" width="160">
              </el-table-column>
              <el-table-column prop="evaluationScore" label="满意度调查得分" width="140">
              </el-table-column>
              <el-table-column prop="course" label="培训课程内容" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="teacherName" label="授课教师" width="140">
              </el-table-column>
              <el-table-column prop="overallEvaluation" label="总体评价" show-overflow-tooltip>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" icon="el-icon-view" @click="oper('2', scope.row)">查看</el-button>
                  <!-- <el-button type="primary" size="small" icon="el-icon-edit"
                    @click="InformationFilling('update', scope.row)">修改</el-button>
                  <el-button type="danger" size="small" icon="el-icon-delete"
                    @click="InformationDel(scope.row)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>

          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="fxr">
        <el-button type="primary" size="small" @click="topOper('0')">调查情况汇总</el-button>
        <el-button type="primary" size="small" @click="topOper('1')">生成问卷链接</el-button>
      </div>

    </div>

    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.current" :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="title1" :visible.sync="dialogVisible" width="30%">
      <span>{{ link }}</span>

    </el-dialog>
    <el-dialog title="选择培训课程" :visible.sync="dialogVisible1" width="30%">
      <el-form ref="postForm" :rules="rules1" :model="formData" label-position="left" label-width="150px">
        <el-card>
          <el-form-item label="课程" prop="trainingClassScheduleId">
            <el-select v-model="formData.trainingClassScheduleId" placeholder="请选择" class="filter-item"
              style="width: 180px">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>


        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>
    <el-dialog :title="title2" :visible.sync="dialogVisible2" width="40%">
      <el-form ref="postForm2" :rules="rules2" :model="formDataCollect" label-position="left" label-width="150px">
        <el-card>
          <el-form-item label="满意度调查总结内容" prop="summary">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formDataCollect.summary">
            </el-input>
          </el-form-item>
        </el-card>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleSave2">确 定</el-button>
      </div>

    </el-dialog>

    <el-dialog :title="title3" :visible.sync="dialogVisible3" width="800px">
      <template v-if="queryParams.params.type == '1'">
        <div class="detail">
          <el-card class="box-card">
            <div class="title">
              <h3>{{ formData3.className }}(培训机构名称)</h3>
              <h3>培训管理满意度测评表</h3>
            </div>
            <h4>说明：</h4>
            <div v-html="formData3.evaluationExplain"></div>

            <el-form :model="formData3">
              <table class="el-table" cellspacing="0" cellpadding="0">
                <colgroup>
                  <col width="70%">
                  <col width="30%">
                </colgroup>
                <tr>
                  <th>测评内容</th>
                  <th colspan="5">分值</th>
                </tr>
                <template v-for="(item, index) in formData3.evaluationItemVO.children">
                  <tr :key="index">
                    <td colspan="6">
                      <h4 style="margin: 0;text-align: left;">{{ item.content }}</h4>
                    </td>
                  </tr>
                  <tr v-for="(item1, index1) in item.children" :key="index1">
                    <td style="text-align: left;">{{ item1.content }}</td>
                    <td>
                      {{ item1.evaluationItemScore }}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td colspan="6">
                    <h5 style="margin: 0;text-align: left;margin-bottom: 10px;">您对此次培训的总体评价:</h5>
                    <p>
                      {{ formData3.overallEvaluation }}
                    </p>
                  </td>
                </tr>
                <tr>
                  <td colspan="6">
                    <h5 style="margin: 0;text-align: left;margin-bottom: 10px;">请您提出宝贵意见和建议:</h5>
                    <p>
                      {{ formData3.commentSuggest }}
                    </p>

                  </td>
                </tr>
              </table>
            </el-form>

          </el-card>

        </div>
      </template>
      <template v-if="queryParams.params.type == '2'">
        <div class="detail">
          <el-card class="box-card">
            <div class="title">
              <!-- <h3>{{ formData3.className }}(培训机构名称)</h3> -->
              <h3>培训教师满意度测评表</h3>
            </div>
            <h4>说明：</h4>
            <div v-html="formData3.evaluationExplain"></div>
            <el-form :model="formData3">
              <table class="el-table" cellspacing="0" cellpadding="0">
                <colgroup>
                  <col width="18%">
                  <col width="9%">
                  <col width="9%">
                  <col width="17%">
                  <col width="17%">
                  <col width="12%">
                  <col width="18%">
                </colgroup>
                <tr>
                  <td>培训班名称</td>
                  <td colspan="4">{{ formData3.className }} </td>
                  <td>起止时间</td>
                  <td>{{ formData3.trainingEndDate&&formData3.trainingEndDate.split(' ')[0] }}<br>{{ formData3.trainingEndDate&&formData3.trainingStartDate.split(' ')[0]  }} </td>
                </tr>
                <tr>
                  <td>培训教师</td>
                  <td colspan="2"> {{ formData3.teacherName }}</td>
                  <td>性别</td>
                  <td>{{ formData3.gender }} </td>
                  <td>专（兼）职</td>
                  <td> {{ formData3.jobType }}</td>
                </tr>
                <tr>
                  <td colspan="2">培训讲授课程</td>
                  <td colspan="5">{{ formData3.course }}</td>
                </tr>
                <tr>
                  <td colspan="5">测评内容</td>
                  <td colspan="2">分值</td>
                </tr>
                <template v-for="(item, index) in formData3.evaluationItemVO.children">
                  <tr :key="index">
                    <td colspan="7">
                      <h4 style="margin: 0;text-align: left;">{{ item.content }}</h4>
                    </td>
                  </tr>
                  <tr v-for="(item1, index1) in item.children" :key="index1">
                    <td style="text-align: left;" colspan="5">{{ item1.content }}</td>
                    <td colspan="2">
                      {{ item1.evaluationItemScore }}
                    </td>
                  </tr>
                </template>
                <tr>
                  <td colspan="7">
                    <h5 style="margin: 0;text-align: left;margin-bottom: 10px;">您对教师的总体评价:</h5>
                    <p>
                      {{ formData3.overallEvaluation }}
                    </p>
                  </td>
                </tr>
              </table>
            </el-form>
          </el-card>

        </div>
      </template>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="handleSave3">确 定</el-button>
      </div> -->

    </el-dialog>

  </div>
</template>
<script>
import { fetchList, fetchAdd, fetchDetail, fetchUpdata, createEvaluation, getEvaluation, getPullDownList, getCollect, saveCollect } from "@/api/SatisfactionEvaluation/index.js";
export default {
  data() {
    return {
      activeName: "second",
      tableData: [],
      title: "",
      queryMap: {
        // className: "",
        // hours: 0,
        // id: "",
        // teacherGraduatingSchool: "",
        // teacherMajor: "",
        // teacherName: "",
        // teacherSignature: "",
        // teacherTeachingMajor: "",
        // teacherTitle: "",
        // teacherWorkplace: "",
        // textbook: "",
        type: '1',
        trainingClassInfoId: this.$route.query.id,
      },
      total: 0,
      queryParams: {
        current: 1,
        orderBy: "",
        params: {
          // className: "",
          // hours: "",
          // id: "",
          // teacherGraduatingSchool: "",
          // teacherMajor: "",
          // teacherName: "",
          // teacherSignature: "",
          // teacherTeachingMajor: "",
          // teacherTitle: "",
          // teacherWorkplace: "",
          // textbook: "",
          type: '1',
          trainingClassInfoId: this.$route.query.id,
        },
        size: 10,
      },
      options: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      link: '',
      formData: {
        trainingClassInfoId: this.$route.query.id,
        trainingClassScheduleId: '',

      },
      rules1: {
        trainingClassScheduleId: [
          { required: true, message: '请选择课程！' }
        ],
        timeOfDay: [
          { required: true, message: '请选择时间！' }
        ],
        signLesson: [
          { required: true, message: '请选择课节！' }
        ],
        teachingContent: [
          { required: true, message: '授课内容不能为空！' }
        ],
        // examId: [
        //   { required: true, message: '请选择试卷！' }
        // ],

      },
      formDataCollect: {
        trainingClassInfoId: this.$route.query.id,


      },
      rules2: {
        summary: [
          { required: true, message: '请输入！' }
        ],
        // timeOfDay: [
        //   { required: true, message: '请选择时间！' }
        // ],
        // signLesson: [
        //   { required: true, message: '请选择课节！' }
        // ],
        // teachingContent: [
        //   { required: true, message: '授课内容不能为空！' }
        // ],
        // examId: [
        //   { required: true, message: '请选择试卷！' }
        // ],

      },
      rules3: {
        summary: [
          { required: true, message: '请输入！' }
        ],
        // timeOfDay: [
        //   { required: true, message: '请选择时间！' }
        // ],
        // signLesson: [
        //   { required: true, message: '请选择课节！' }
        // ],
        // teachingContent: [
        //   { required: true, message: '授课内容不能为空！' }
        // ],
        // examId: [
        //   { required: true, message: '请选择试卷！' }
        // ],

      },
      title1: '',
      title2: '',
      title3: '',
      formData3: {
        evaluationItemVO: {
          children: []
        },
        overallEvaluation: '',//总体评价
      }
    };

  },
  created() {
    this.getList();
  },
  methods: {
    handleClick(tab, event) {
      this.getList()
      console.log(tab, event);
    },

    async InformationDetails(row) {
      console.log(row);

      let res = await teachingPlanExecutionGet(row.id);
      if (res.code == 200) {
        this.queryMap = res.data;
      }
    },
    async getList() {
      let res = await fetchList(this.queryParams);
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    topOper(type) {
      switch (type) {
        case '0':

          switch (this.queryParams.params.type) {
            case '1':
              this.title2 = '培训班调查汇总情况'
              break;
            case '2':
              this.title2 = '教师调查汇总情况'
              break;
            default:
              break;
          }
          getCollect({
            trainingClassInfoId: this.$route.query.id,
            type: this.queryParams.params.type
          }).then(res => {
            this.formDataCollect = res.data
            this.dialogVisible2 = true
            this.$nextTick(() => {
              this.$refs.postForm2.clearValidate()
            })
          })
          break;
        case '1'://汇总情况


          this.link = ''
          switch (this.queryParams.params.type) {
            case '1':
              this.title1 = '培训班问卷链接'
              createEvaluation({
                trainingClassInfoId: this.$route.query.id
              }).then(res => {
                if (res.code == 200) {
                  this.link = location.origin + '/#/managesurvey?id=' + res.data;
                  this.dialogVisible = true
                }
              })
              break;
            case '2':
              this.title1 = '教师问卷链接'
              getPullDownList({
                id: this.$route.query.id
              }).then(res => {
                console.log(res);
                this.options = res.data
                this.dialogVisible1 = true
                this.$nextTick(() => {
                  this.$refs.postForm.clearValidate()
                })
              })
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }

      console.log(1111);
    },
    oper(type, row) {
      switch (type) {
        case '2'://查看
          switch (this.queryParams.params.type) {
            case '1':
              this.title3 = '培训班满意度详情'
              break;
            case '2':
              this.title3 = '教师满意度详情'
              break;
            default:
              break;
          }
          fetchDetail(row.id).then(res => {
            this.formData3 = res.data
            this.dialogVisible3 = true
          })
          break;

        default:
          break;
      }
    },
    handleSave() {
      let that = this
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }


        let api = createEvaluation
        api(that.formData).then((res) => {

          if (res.code == 200) {
            this.link = location.origin + '/#/Teachersurvey?id=' + res.data;
            this.dialogVisible = true
          }

        })


      })

    },
    handleSave2() {
      let that = this
      this.$refs.postForm2.validate((valid) => {
        if (!valid) {
          return
        }
        this.$confirm('确实要提交保存吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let api = saveCollect
          api(that.formDataCollect).then((res) => {

            that.$message({
              type: 'success',
              message: '保存成功!'
            })

            this.dialogVisible2 = false;


          })
        })
      })
    },
    InformationDel(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await teachingPlanExecutionDelete(row.id);
          if (res.code == 200) {
            this.$success("删除成功");
          }
        })
        .catch(() => {
          this.$success({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
  margin-right: 5px;
}

.pos {
  position: relative;

  .fxr {
    position: absolute;
    right: 50px;
    top: 0;
    z-index: 1;
  }
}

/deep/.el-tabs__content {
  height: 100%;
}

.table {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: calc(100% - 50px);

  .pagination {
    margin-top: 20px;
    text-align: right;
    margin-right: 5px;
  }

  .iconfont {
    font-size: 12px;
  }
}

.detail {
  background-color: #eee;
  box-sizing: border-box;
  font-family: '仿宋';

  .title {
    text-align: center;
  }

  h4 {
    text-align: left;
    margin: 0;
  }

  .el-table th,.el-table td,
  .el-table th.is-leaf {
    border: 1px solid #ebeef5;

  }
}

table {
  width: 100%;
  margin-top: 20px;

  tr {
    th {
      background: rgb(242, 243, 244);
      color: rgb(85, 85, 85);
      font-weight: bold;
      line-height: 32px;
    }

    td {
      padding: 10px;
      text-align: center;

      p {
        text-align: left;
        margin: 0;
        text-indent: 2em;
      }
    }
  }
}

</style>
